<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
        }

        ul li{
            width: 20%;
        }
    </style>
</head>

<body>
    <ul>
        
    </ul>
    <button>点击</button><div style="display: none;">没了</div>
</body>
<script src="./js/index.js"></script>
<script>
    let page =1, max=0;
    eee();
    function eee() {


        //promise
        
        let index = async () => {
            let se = await http.get({
                url: "http://127.0.0.1:3000/api/json/classList",
                data: {
                    id : 253,
                    page
                }
            })
            console.log(se)
            max=se.result.total_page

            se.result.data.forEach(v => {
                $("ul").innerHTML+= `
                <li>
                   <a target="_blank" href="./index2.html?id=${v.id}&total=${v.total}"">
                      <img src="${v.preview}" alt="">
                     <div>${v.title}</div>
                   </a>
               </li>`
            });

        }

        index();

        $("button").onclick=()=>{
            page+=1
            if(page==max){
                $("div").style.display="block"
            }else{
                index();
            }
        }






        //callback 获取异步返回值

        // http.get({
        //     url: "http://127.0.0.1:3000/api/json/index",

        //     success:(e)=>{
        //         console.log(e)
        //         e.result.list.forEach(v => {
        //             $(".qwe").innerHTML +=`<img src="${v.img_src}" alt="">`
        //         });

        //     },
        //     error:(er)=>{

        //     }
        // })




        // let xhr = new XMLHttpRequest();

        // xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
        // xhr.setRequestHeader()
        // xhr.timeout()
        // xhr.send()

        // xhr.onreadystatechange = () => {
        //     if (xhr.readyState == "4") {
        //         if (xhr.status == "200") {

        //         }
        //     }
        // }


    }



    function $(name) {
        return document.querySelector(name);
    }
    function _(name) {
        return document.querySelectorAll(name);
    }

</script>

</html>